<template>
  <!-- 商品详情-带货达人8/134 -->
  <div class="talent_details_box" id="talenttts">
    <template v-if="vipRootObj[8][134].owner">
      <template v-if="!once">
        <div class="top">
          <radio_group01 :radio_values="['近7天', '30天', '90天']" v-model="KindName" class="tab01" />
          <div class="optionsBox">
            <el-date-picker
              class="long_time"
              v-model="liveTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              prefix-icon="el-icon-arrow-down"
              unlink-panels
              :clearable="false"
              :picker-options="pickeroptions"
              value-format="yyyy-MM-dd"
              @change="onPick1"
            ></el-date-picker>
          </div>
        </div>
        <div class="condition_group">
          <category_industry v-model="industryItemObj" :shrink="true" />
          <dl>
            <!-- <dt>粉丝数</dt> -->
            <dd>
              <div class="cg_items">
                <radio_group
                  :radio_values="[
                  '全部',
                  '<1w',
                  '1w-10w',
                  '10w-50w',
                  '50w-100w',
                  '100w-500w',
                  '500w-1000w',
                  '>1000w'
                ]"
                  v-model="my_radio02"
                  title="粉丝数"
                  isSearch="1"
                />
              </div>
            </dd>
          </dl>
          <dl>
            <dd>
              <div class="cg_items cg_items1">
                <radio_group
                  :radio_values="['全部', '高', '中', '低', '无']"
                  v-model="my_radio01"
                  title="口碑等级"
                  isSearch="1"
                />
              </div>
            </dd>
          </dl>
        </div>
        <div class="searchBox">
          <el-input
            type="text"
            v-model="keyWords"
            @keyup.enter.native="toSearch"
            placeholder="请输入达人名称关键词搜索"
          ></el-input>
          <div class="imgBox" @click="toSearch">
            <!-- <img src="@/assets/wang/talentCompare/search.png" /> -->
          </div>
        </div>

        <table class="table">
          <thead>
            <tr>
              <th>达人</th>
              <th>行业</th>
              <th @click="sort_fun(false, 2)" v-if="orderBy == 'desc' && sort == 2">
                口碑分
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderBy == 'desc' && sort == 2"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(true, 2)">
                口碑分
                <img src="@/assets/meng/up_down.png" v-if="orderBy == 'asc' && sort == 2" />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <!--  -->
              <th @click="sort_fun(false, 1)" v-if="orderBy == 'desc' && sort == 1">
                预估总销量
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderBy == 'desc' && sort == 1"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(true, 1)">
                预估总销量
                <img src="@/assets/meng/up_down.png" v-if="orderBy == 'asc' && sort == 1" />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <!--  -->
              <th @click="sort_fun(false, 0)" v-if="orderBy == 'desc' && sort == 0">
                预估总销售额
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderBy == 'desc' && sort == 0"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(true, 0)">
                预估总销售额
                <img src="@/assets/meng/up_down.png" v-if="orderBy == 'asc' && sort == 0" />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>

              <th>
                关联视频
                <!-- <img src="@/assets/meng/up_down.png" v-if="orderBy == 0 && sort == 2" /><img
                src="@/assets/meng/no_down_up.png" v-else />-->
              </th>
              <!-- <th v-else @click="sort_fun(true, 2)">
            关联视频
            <img src="@/assets/meng/down_up.png" v-if="orderBy == 1 && sort == 2" class="sort" /><img
              src="@/assets/meng/no_down_up.png" v-else />
              </th>-->

              <th>
                关联直播
                <!-- <img src="@/assets/meng/up_down.png" v-if="orderBy == 0 && sort == 3" /><img
                src="@/assets/meng/no_down_up.png" v-else />-->
              </th>
              <!-- <th v-else @click="sort_fun(true, 3)">
            关联直播
            <img src="@/assets/meng/down_up.png" v-if="orderBy == 1 && sort == 3" class="sort" /><img
              src="@/assets/meng/no_down_up.png" v-else />
              </th>-->

              <!-- <th
              @click="sort_fun(false, 1)"
              v-if="orderBy == 'desc' && sort == 1"
              class="cursor"
            >
              预估销量
              <img
                src="@/assets/meng/down_up.png"
                v-if="orderBy == 'desc' && sort == 1"
                class="sort"
              /><img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th v-else @click="sort_fun(true, 1)">
              预估销量
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderBy == 'asc' && sort == 1"
              /><img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              @click="sort_fun(false, 0)"
              v-if="orderBy == 'desc' && sort == 0"
              class="cursor"
            >
              预估销售额
              <img
                src="@/assets/meng/down_up.png"
                v-if="orderBy == 'desc' && sort == 0"
                class="sort"
              /><img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th v-else @click="sort_fun(true, 0)">
              预估销售额
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderBy == 'asc' && sort == 0"
              /><img src="@/assets/meng/no_down_up.png" v-else />
              </th>-->
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, i) in data_01" :key="i + 'c'">
              <td>
                <div class="live_box">
                  <div class="img_box">
                    <img :src="item.logo" @click="go_to_page01(item.authorId)" v-errorImg:talent />
                    <div class="zhibo" v-if="item.livestatus == 1">
                      <p class="livingGif">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                      </p>
                    </div>
                  </div>
                  <div class="live_box_right">
                    <span class="title" @click="go_to_page01(item.authorId)">{{ item.nickName }}</span>
                    <!-- <div class="time">开播:11-18 12:27</div> -->
                  </div>
                </div>
              </td>
              <td>{{ item.category }}</td>
              <td>{{ item.publicpraisestr }}</td>
              <!--  -->
              <td>{{ format_num(item.volume) }}</td>
              <td>{{ format_num(item.amount) }}</td>
              <td>{{ format_num(item.associatedvideo) }}</td>
              <td>
                {{ format_num(item.associatedlive) }}
                <img
                  v-if="item.associatedlive"
                  class="liveroomIcon"
                  src="@/assets/wang/work/liveroomIcon.png"
                  @click="author1(item.authorId)"
                />
              </td>
              <!-- <td>{{ format_num(item.volume) }}</td>
              <td>{{ format_num(item.amount) }}</td>-->
            </tr>
          </tbody>
        </table>
        <!-- <p
        class="nothing"
        v-if="data_01.length && !listLoading && page * size >= total"
      >
        我是有底线的～
        </p>-->
        <!-- 直播间弹窗 -->
        <el-dialog
          :visible.sync="showHotRoom"
          v-if="showHotRoom"
          top="10%"
          class="dialog01"
          custom-class="buyDialog"
          width="790px"
        >
          <div class="hotRoomBox">
            <p class="hotRoomTitle">仅显示该商品在关联直播间的销售数据</p>
            <div
              v-loading="roomLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
            >
              <table class="table hotRoomTable">
                <thead>
                  <tr>
                    <th style="padding-left:30px">直播间</th>
                    <th>预估销量(件）</th>
                    <th>预估销售额</th>
                    <th>平均在线人数</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in data_02" :key="index">
                    <td style="width:260px">
                      <div class="roomInfo" style="padding-left:30px">
                        <div class="imgBox">
                          <img :src="item.roomLogo" @click="toLiveDetails(item.roomId, '0')" />
                          <div class="liveBox" v-if="item.status == 1">
                            <p class="livingGif">
                              <span></span>
                              <span></span>
                              <span></span>
                              <span></span>
                            </p>
                          </div>
                        </div>
                        <!--  -->
                        <div class="roomRight">
                          <div class="nameBox">
                            <p
                              class="pointerWl"
                              @click="toLiveDetails(item.roomId, '0')"
                            >{{ item.roomTitle }}</p>
                          </div>
                          <p>{{ timestamp(item.beginUnix, "M-D h:m") }}</p>
                        </div>
                      </div>
                    </td>
                    <td
                      style="font-size:15px !important; width:10%;    font-family: DINAlternate-Bold;"
                    >{{ format_num(item.livevolume) }}</td>
                    <td>{{ format_num(item.livesale) }}</td>
                    <td>{{ format_num(item.avgonlinePeople) }}</td>
                  </tr>
                </tbody>
              </table>

              <div class="zw" v-if="data_02.length == 0 && !roomLoading">
                <img src="@/assets/liu/zw.png" />
                <p>暂无数据</p>
              </div>
              <!-- <p
              class="nothing"
              v-if="data_02.length && !roomLoading && page1 * size1 >= count"
            >
              我是有底线的～
              </p>-->
              <div class="pageBox page_box" v-if="data_02.length && count > size1">
                <el-pagination
                  background
                  layout="prev, pager, next, jumper"
                  :total="count"
                  :page-size="size1"
                  :current-page="page1"
                  @current-change="changePage"
                  :hide-on-single-page="true"
                ></el-pagination>
                <!-- :hide-on-single-page="true" -->
              </div>
            </div>
          </div>
        </el-dialog>

        <div class="pageBox" v-if="data_01.length && !listLoading">
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="total"
            :page-size="size"
            :current-page="page"
            @current-change="get_data"
            :hide-on-single-page="true"
          ></el-pagination>
        </div>
        <div class="zw_box" v-if="data_01.length == 0 && !listLoading">
          <div class="zw">
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
        </div>
      </template>
      <div
        v-if="data_01.length == 0 && listLoading && !once"
        style="margin-top: 30px; margin-bottom: 100px"
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      ></div>
      <div
        v-if="once"
        style="margin-top: 30px; margin-bottom: 100px"
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      ></div>
    </template>
    <div class="dialogEg" v-else>
      <img :src="$global.staticUrl + 'image/egImg/goodsJurisdiction4.png'" alt />
      <payVip routerName="compare" :lowestVipNum="vipRootObj[8][134].ownerMinLevel" />
    </div>
  </div>
</template>

<script>
import live_houseVue from '../../meng/live/live_house.vue';
import category_industry from '@/component/category_industry.vue';
export default {
  data() {
    return {
      once: true,
      id1: '',
      count: null,
      total: null,
      listLoading: false,
      page1: 1,
      size1: 5,
      cancel01: null,
      // 弹窗
      data_02: [],
      data_01: [],
      fans: null,
      level: -1,
      category: 0,
      my_radio02: '全部',
      my_radio01: '全部',
      // count: "", //分页
      showroomList: [],
      roomLoading: false, //弹窗loading
      showHotRoom: false, //弹窗
      KindName: '30天',
      liveTime: [],
      startDate: '',
      endDate: '',
      keyWords: '',
      orderBy: 'desc', //1降序 0升序
      sort: 1,
      size: 9,
      page: 1,
      // 选择时间 不可选的日期
      pickeroptions: {
        disabledDate: time => {
          // let startDay = new Date("2021/3/1");
          return (
            time.getTime() < Date.now() - 180 * 24 * 60 * 60 * 1000 || time.getTime() > Date.now()
          ); // 返回 所有时间 大于 当前时间
        }
      },

      isOverstep: false, //是否超出（初始化）
      isUnfold: false, //是否展示
      vipRootObj: this.$store.state.userRoot, //会员权限对象
      industryItemObj:{
        name:'全部',
        id:0
      }
    };
  },
  props: ['id'],
  components: {
    category_industry
  },
  created() {
    if (this.vipRootObj[8][134].owner) {
      this.getTime();
    }
  },
  mounted() {
    window.addEventListener('scroll', this.initHeight);
    this.setCondition();
  },
  watch: {
    industryItemObj(){
      //点击达人行业选项
      this.data_01 = [];
      this.page = 1;
      this.getTime();
      // this.$forceUpdate();  vue组件重新渲染
    },
    my_radio01(n) {
      if (n == '全部') {
        this.level = -1;
      } else if (n == '高') {
        this.level = 1;
      } else if (n == '中') {
        this.level = 2;
      } else if (n == '低') {
        this.level = 3;
      } else if (n == '无') {
        this.level = 0;
      }
      this.data_01 = [];
      this.page = 1;
      this.getTime();
    },
    my_radio02(n) {
      if (n == '全部') {
        this.fans = null;
      } else if (n == '<1w') {
        this.fans = '0 - 10000';
      } else if (n == '1w-10w') {
        this.fans = '10000 - 100000';
      } else if (n == '10w-50w') {
        this.fans = '100000 - 500000';
      } else if (n == '50w-100w') {
        this.fans = '500000 - 1000000';
      } else if (n == '100w-500w') {
        this.fans = '1000000 - 5000000';
      } else if (n == '500w-1000w') {
        this.fans = ' 5000000 - 10000000';
      } else if (n == '>1000w') {
        this.fans = ' 10000000 - 1000000000';
      }
      this.data_01 = [];
      this.page = 1;
      this.getTime();
    },
    KindName: function (newVal, oldVal) {
      if (this.KindName != '') {
        this.KindName = newVal;
        this.data_01 = [];
        this.page = 1;
        this.getTime();
      }
    },
    keyWords: function (newVal, oldVal) {
      if (newVal == '') {
        this.data_01 = [];
        this.getTime();
      }
    }
  },
  methods: {
    // 列表分页
    get_data(page) {
      this.data_01 = [];
      this.page = page;
      this.getTime();
    },

    // 跳直播详情
    toLiveDetails(id, tabNo) {
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${id}/${tabNo}`
      });
      window.open(router.href, '_blank');
    },
    // 热门直播间分页
    changePage(n) {
      this.page1 = n;
      this.data_02 = [];
      this.author();
      // this.showroomList = this.roomList.slice(5 * (n - 1), 5 * n);
      // this.$nextTick(() => {
      //   setTimeout(() => {
      //     this.roomLoading = false;
      //   }, 500);
      // });
    },
    unfoldFn() {
      this.isUnfold = !this.isUnfold;
    },
    setCondition() {
      this.$nextTick(() => {
        let box = this.$refs.ovBox;
        if (!box) return;
        let childBox = this.$refs.ovChild;
        let boxHeight = box.offsetHeight;
        let childBoxHeight = childBox.offsetHeight;
        if (boxHeight < childBoxHeight) {
          this.isOverstep = true;
        }
      });
    },
    onPick1() {
      this.KindName = '';
      this.data_01 = [];
      this.page = 1;
      this.getTime();
    },
    // 达人详情
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`
      });
      window.open(router.href, '_blank');
    },
    //搜索
    toSearch() {
      this.data_01 = [];
      this.page = 1;
      this.getTime();
    },

    initHeight() {
      var scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.isFixed = scrollTop > 100;
      0 ? true : false;
    },
    author1(id) {
      if (id) {
        this.id1 = id;
      }
      this.page1 = 1;
      this.showHotRoom = true;
      this.author();
    },
    // 商品在达人直播数据
    author(id) {
      this.roomLoading = true;

      this.$axios
        .post('/api/live/author', {
          // proId: "3480244482744692868",
          proId: this.id,
          authorid: this.id1,
          startDate: this.startDate,
          endDate: this.endDate,
          sort: 0,
          page: this.page1,
          size: this.size1,
          order_by: 'desc'
        })
        .then(res => {
          this.roomLoading = false;
          if (res.data.code == 0) {
            this.data_02 = res.data.data;

            this.count = res.data.count;
          }
        });
    },
    //
    getTime() {
      this.listLoading = true;
      switch (this.KindName) {
        case '近7天':
          this.endDate = this.timestamp(Date.now() / 1000, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 6, 'Y-M-D');
          break;

        case '30天':
          this.endDate = this.timestamp(Date.now() / 1000, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D');
          break;
        case '90天':
          this.endDate = this.timestamp(Date.now() / 1000, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 89, 'Y-M-D');
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [this.startDate, this.endDate];
      let that = this;
      this.$axios
        .post(
          '/api/product/proauthor',
          {
            // proId: "3480244482744692868",
            proId: this.id,
            key: this.trimStr(this.keyWords),
            // categoryId: this.category,
            categoryId: this.industryItemObj.id,
            startDate: this.startDate,
            endDate: this.endDate,
            fans: this.fans,
            level: this.level,
            sort: this.sort,
            page: this.page,
            size: this.size,
            order_by: this.orderBy
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01) that.cancel01();
              that.cancel01 = c;
            })
          }
        )
        .then(res => {
          this.listLoading = false;
          if (res.data.code == 0) {
            this.once = false;
            this.data_01 = res.data.data;
            this.setCondition();
            this.total = res.data.count;
          } else if (res.data.code == 1003) {
            this.once = false;
          } else {
            this.once = false;
          }
        });
    },
    // 排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.orderBy = 'desc';
      } else {
        this.orderBy = 'asc';
      }
      this.sort = parm02;
      this.data_01 = [];
      this.page = 1;
      this.getTime();
    }
  },
};
</script>

<style scoped lang="less">
.talent_details_box {
  .zw_box {
    position: relative;
    height: 200px;
  }
  // padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;

  box-sizing: border-box;
  .zw {
    margin-top: 100px;
  }
  .condition_group {
    margin-top: 22px;
    dl {
      display: flex;
      font-size: 14px;
      margin-bottom: 6px;
      &:last-child {
        margin-bottom: 0;
      }
      dt {
        padding-top: 6px;
        width: 78px;
        flex-shrink: 0;
        color: #888;
      }
      dd {
        position: relative;
        color: #555;
        height: 32px;
        overflow: hidden;
        .cg_items {
          display: inline-block;
          font-size: 0;
          span {
            display: inline-block;
            height: 32px;
            padding: 0 16px;
            // margin-bottom: 5px;
            line-height: 32px;
            font-size: 14px;
            cursor: pointer;
            vertical-align: middle;
            &.active {
              color: #fd7f2c;
              background-color: #fff1e8;
              border-radius: 4px;
            }
          }
          span:hover {
            color: #ff924b;
          }
          i {
            position: absolute;
            display: none;
            right: 0;
            top: 6px;
            font-size: 14px;
            font-style: normal;
            color: #fd7f2c;
            cursor: pointer;
          }
        }
        &.overstep {
          padding-right: 22px;
          .cg_items {
            i {
              display: inline-block;
              vertical-align: middle;
            }
          }
        }
        &.is_unfold {
          padding-right: 0;
          height: inherit;
          .cg_items {
            i {
              position: inherit;
            }
          }
        }
      }
    }
  }
  .top {
    // width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .optionsBox {
    margin-left: 10px;
  }
  // 搜索框
  .searchBox {
    width: 308px;
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e5e5e5;
    margin-top: 21px;
    .el-input__inner {
      flex: 1;
    }
    .imgBox:hover {
      background: url('../../../assets/wang/talentCompare/search.png') no-repeat 10px 7px, #fff;
      background-size: 15px 15px;
    }
    .imgBox {
      width: 40px;
      height: 32px;
      border-radius: 0px 4px 4px 0px;
      cursor: pointer;
      display: grid;
      place-items: center;
      background: url('../../../assets/wang/talentCompare/search-nohover.png') no-repeat 10px 7px,
        #fff;
      background-size: 15px 15px;
      img {
        width: 15px;
        height: 15px;
      }
    }
  }
  table {
    width: 100%;
    margin-top: 10px;
    text-align: center;
    box-sizing: border-box;
    thead {
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
      }
      tr {
        width: 100%;
        height: 48px;
        background-color: #f5f9ff;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        font-stretch: normal;
        letter-spacing: 0;
        color: #555;
        th:nth-child(1) {
          width: 16%;
          text-align: left;
          padding-left: 39px;
        }
        // th:last-child {
        // }
        // th:nth-child(2),
        th:nth-child(3),
        th:nth-child(4),
        th:nth-child(5),
        th:nth-child(6),
        th:nth-child(7),
        th:nth-child(8) {
          width: 11%;
          cursor: pointer;
        }
      }
    }

    tbody {
      tr {
        height: 78px;
        .live_box_right {
          max-width: 200px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .liveroomIcon {
          width: 15px;
          height: 16px;
          position: relative;
          top: -2px;
          cursor: pointer;
          margin-left: 3px;
        }
        .live_box {
          min-width: 360px;
          padding-left: 39px;
          display: flex;
          align-items: center;
          overflow: hidden;
          text-overflow: ellipsis;
          .img_box {
            width: 50px;
            height: 50px;
            border-radius: 50px;
            margin-right: 10px;
            position: relative;
            .zhibo {
              width: 18px;
              height: 18px;
              background: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              border-radius: 4px;
              position: absolute;
              top: 32px;
              left: 30px;
              z-index: 2;
              display: flex;
              justify-content: center;
              align-items: center;
              .playingText {
                font-size: 12px;
                color: #ffffff;
              }
            }
          }
          img {
            cursor: pointer;
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 50px;
          }
          .title {
            &:hover {
              color: #ff924b;
            }
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #222222;
            white-space: nowrap;
            // width: 244px;

            // overflow: hidden;
            // text-overflow: ellipsis;
          }
          .time {
            font-size: 13px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #888888;
            text-align: left;
            margin-top: 7px;
            white-space: nowrap;
          }
        }
        td:nth-child(2) {
          > div {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            img {
              width: 50px;
              height: 50px;
              border: 1px solid #e5e5e5;
              border-radius: 50%;
              margin-right: 10px;
            }
            > div {
              font-size: 14px;
              color: #222;
              font-weight: 600;
              white-space: nowrap;
            }
          }
        }

        td:nth-child(2) {
          font-size: 14px;
          color: #222;
          white-space: nowrap;
        }
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6),
        td:nth-child(7),
        td:nth-child(8) {
          font-family: DINAlternate-Bold;
          font-size: 15px;
          color: #222;
          white-space: nowrap;
        }
      }
    }
  }
  // 弹窗
  .hotRoomBox {
    // width: 790px;
    min-height: 350px;
    // min-height: 566px;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 20px;
    // padding-bottom: 0;
    .hotRoomTitle {
      font-size: 14px;
      color: #888888;
      padding-bottom: 14px;
    }
    .zw {
      position: absolute;
      top: 238px;
      margin-top: 0;
    }
  }
  // 弹窗底线~
  .Popupline {
    font-size: 14px;
    color: #888;
    text-align: center;
    height: 40px;
    line-height: 40px;
    padding-top: 30px;
  }

  // 直播间
  .roomInfo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-right: 10px;
    padding-left: 10px;
    .imgBox {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      position: relative;
      img {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        cursor: pointer;
        border: 1px solid #e5e5e5;
      }
      .liveBox {
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 18px;
        height: 18px;
        background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%),
          linear-gradient(#ffffff, #ffffff);
        background-blend-mode: normal, normal;
        border-radius: 6px 0px 4px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        .liveText {
          font-weight: 600;
          font-size: 12px;
          color: #ffffff;
        }
      }
    }
    .roomRight {
      margin-left: 11px;
      .nameBox {
        text-align: left;
        display: flex;
        align-items: center;
        p {
          width: 200px;
          font-size: 14px;
          color: #222;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        p:hover {
          color: #ff924b;
        }
        img {
          width: 14px;
          height: 14px;
          margin-left: 6px;
        }
      }
      p {
        font-size: 14px;
        color: #888888;
        padding-top: 5px;
        text-align: left;
        // white-space: nowrap;
        span:first-of-type {
          padding-right: 8px;
        }
      }
      .liveListBtn {
        cursor: pointer;
        width: 94px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        background-color: #f5f9ff;
        border-radius: 4px;
        border: solid 1px #fd7f2c;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        span {
          font-size: 13px;
          color: #fd7f2c;
        }
        img {
          width: 8px;
          height: 5px;
          margin-left: 5px;
        }
        // .hidden {
        //   display: none;
        // }
      }
    }
  }
}
</style>
